<!--处置结果-->
<script setup>
import { useOderDispose } from '@/composables/useOderDispose.js'
import DisposeResultCard from '@/views/dispose/components/DisposeResultCard.vue'
import NoData from '@/components/NoData.vue'
const props = defineProps({
  orderNo: String
})
const { getOrderDisposeData, disposeData } = useOderDispose()
onMounted(() => {
  getOrderDisposeData({
    orderNo: props.orderNo
  })
})
function getTitle(type) {
  switch (type) {
    case 'province':
      return '省级处置'
    case 'city':
      return '州市处置'
    case 'country':
      return '区县处置'
  }
}

const allArraysEmpty = computed(() => {
  return Object.values(disposeData.value).every((array) => array.length === 0)
})
</script>

<template>
  <div class="p-12px mb-30px">
    <template v-if="!allArraysEmpty">
      <div v-for="(values, keys) in disposeData" :key="keys">
        <template v-if="values?.length">
          <div class="text-#1E2226 text-18px font-600 leading-18px mb-16px">
            {{ getTitle(keys) }}
          </div>
          <div
            class="mb-12px bg-#FFFFFF rounded-4px"
            v-for="(value, key) in values"
            :key="key"
          >
            <template v-if="value?.length">
              <DisposeResultCard
                :data="item"
                v-for="item in value"
                :key="item.id"
              />
            </template>
          </div>
        </template>
      </div>
    </template>
    <template v-else>
      <NoData />
    </template>
  </div>
</template>

<style scoped lang="less"></style>
